'use client'

import { motion } from 'framer-motion'
import { Sparkles, RefreshCw } from 'lucide-react'

interface DrawCardButtonProps {
  onClick: () => void
  isDrawing: boolean
  disabled?: boolean
}

export default function DrawCardButton({ onClick, isDrawing, disabled = false }: DrawCardButtonProps) {
  return (
    <motion.button
      onClick={onClick}
      disabled={disabled || isDrawing}
      className={`
        relative px-8 py-4 rounded-full font-semibold text-lg
        bg-gradient-to-r from-blue-500 to-purple-600
        hover:from-blue-600 hover:to-purple-700
        text-white shadow-lg hover:shadow-xl
        transform transition-all duration-300
        disabled:opacity-50 disabled:cursor-not-allowed
        overflow-hidden group
      `}
      whileHover={{ scale: disabled ? 1 : 1.05 }}
      whileTap={{ scale: disabled ? 1 : 0.95 }}
      initial={{ y: 20, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ delay: 0.5 }}
    >
      {/* 背景光效 */}
      <div className="absolute inset-0 bg-gradient-to-r from-blue-400 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      
      {/* 闪光效果 */}
      <motion.div
        className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent"
        initial={{ x: '-100%' }}
        animate={{ x: isDrawing ? '100%' : '-100%' }}
        transition={{ 
          duration: 1.5, 
          repeat: isDrawing ? Infinity : 0,
          ease: 'linear'
        }}
      />

      {/* 按钮内容 */}
      <div className="relative flex items-center justify-center gap-3">
        <motion.div
          animate={{ rotate: isDrawing ? 360 : 0 }}
          transition={{ 
            duration: 1, 
            repeat: isDrawing ? Infinity : 0,
            ease: 'linear'
          }}
        >
          {isDrawing ? (
            <RefreshCw className="w-6 h-6" />
          ) : (
            <Sparkles className="w-6 h-6" />
          )}
        </motion.div>
        
        <span>
          {isDrawing ? '抽取中...' : '抽取经文卡'}
        </span>
      </div>

      {/* 粒子效果 */}
      {!disabled && (
        <>
          {[...Array(6)].map((_, i) => (
            <motion.div
              key={i}
              className="absolute w-1 h-1 bg-white rounded-full"
              style={{
                left: `${20 + i * 10}%`,
                top: '50%',
              }}
              animate={{
                y: [-10, -20, -10],
                opacity: [0, 1, 0],
                scale: [0, 1, 0],
              }}
              transition={{
                duration: 2,
                repeat: Infinity,
                delay: i * 0.2,
                ease: 'easeInOut',
              }}
            />
          ))}
        </>
      )}
    </motion.button>
  )
}